<template>
    <div>
        <!-- 搜索栏 -->
        <div>
            <el-input v-model="searchStr" placeholder="请输入标题" style="width:240px;margin-right: 10px"></el-input>
            <el-button type="primary" @click="doFilter">搜索</el-button>
            <el-button plain @click="handleAdd">
                添加
            </el-button>
        </div>
        <!-- 表格 -->
        <el-table
                :data="tableData"
                border
                style="width: 100%;margin-top: 10px;margin-bottom: 10px">
            <el-table-column
                    prop="id"
                    label="数据ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序"
                    width="180">
            </el-table-column>

            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleEditView(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 12, 15, 100, 500]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
    <!-- 弹框（添加、编辑） -->
    <div>
        <el-dialog
            v-model="dialogVisible"
            modal-class="overide-animation"
            @close="close"
            draggable
        >
            <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    label-width="auto"
                    class="demo-ruleForm"
            >
                <el-form-item label="数据ID" prop="pass">
                    <el-input v-model="ruleForm.id" type="text" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="标题" prop="pass">
                    <el-input v-model="ruleForm.title" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="排序" prop="pwd">
                    <el-input v-model="ruleForm.sort" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- @click="dialogVisible = false" 实现弹框隐藏 -->
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style lang="scss">
    .el-table{
        .el-table__cell {
            padding: 6px !important;
        }
    }
</style>
<script>
    import { allApi } from '../utils/api';
    import { ElMessage } from "element-plus";
    import { ref } from 'vue';

    export default {
        data() {
            return {
                searchStr: "",//搜索字符串
                tableData: ref(''),//表格数据
                currentPage: 0,//当前页码
                pageSize: 12,//每页展示记录数
                total: ref(''),//总记录数
                dialogVisible: ref(false),//是否显示添加弹框
                ruleForm:{
                    id:'',
                    title:'',
                    sort:'',
                }
            };
        },
        mounted() {
            this.getData();
        },
        methods: {
            //搜索
            doFilter() {
                // if (this.searchStr == "") {
                //     this.$message.warning("查询条件不能为空！");
                //     return;
                // }
                this.tableData = [],
                    this.currentPage = 0,
                    this.total = 0,
                    this.getData()
            },
            //切换 每页展示记录数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getData();
            },
            //页码跳转
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getData();
            },
            //请求数据
            async getData() {
                const data = {
                    pageSize: this.pageSize,
                    currentPage: this.currentPage,
                    'searchStr': this.searchStr
                };
                //请求数据
                allApi.demo(data).then(res => {
                    ElMessage.success('加载成功');
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                })
            },
            //监听关闭
            close() {
            },
            //点击添加
            handleAdd() {
                //更新数据
                this.ruleForm.id = '';
                this.ruleForm.title = '';
                this.ruleForm.sort = '';
                //显示弹框
                this.dialogVisible = true;
            },
            //确认添加
            async handleSubmit() {
                const data = {
                    'id': this.ruleForm.id,
                    'title': this.ruleForm.title,
                    'sort': this.ruleForm.sort
                };
                //请求数据
                allApi.demoAdd(data).then(res => {
                    setTimeout(function () {
                        this.getData()
                    }.bind(this), 500)
                })
            },
            //编辑页面
            handleEditView(rowData) {
                //更新数据
                this.ruleForm.id = rowData.id;
                this.ruleForm.title = rowData.title;
                this.ruleForm.sort = rowData.sort;
                //显示弹框
                this.dialogVisible = true;
            },
            //删除行
            async handleDelete(rowData) {
                const data = {
                    id: rowData.id
                };
                //请求数据
                allApi.demoDelete(data).then(res => {
                    setTimeout(function () {
                        this.getData()
                    }.bind(this), 500)
                })
            }
        }
    }
</script>